<template>
  <view class="index">
    <!-- #ifdef MP-WEIXIN -->
    <view class="wx-nav">
      <text>奥莱乐购</text>
    </view>
    <!-- #endif -->

    <scroll-view scroll-x="true"
                 class="scroll-content"
                 :scroll-into-view="scrollIntoIndex">
      <view :id="'top'+index"
            class="scroll-item"
            v-for="(item, index) in topBar"
            :key="index"
            @tap="changeTab(index)">
        <text :class='topBarIndex===index ? "f-active-color" : "f-color"'>{{item.name}}</text>
      </view>
    </scroll-view>

    <swiper @change='onChangTab'
            :current="topBarIndex"
            :style="'height:'+clientHeight+'px;'">
      <swiper-item v-for="(item, index) in newTopBar"
                   :key="index">
        <!-- {{item}} -->
        <scroll-view scroll-y="true"
                     :style="'height:'+clientHeight+'px;'"
                     @scrolltolower="loadMore(index)">
          <block v-if='item.data.length > 0'>
            <block v-for="(k, i) in item.data"
                   :key="i">
              <!-- 推荐 -->
              <!-- {{k.type}} -->
              <IndexSwiper v-if="k.type === 'swiperList'"
                           :dataList='k.data'></IndexSwiper>
              <template v-if="k.type === 'recommendList'">
                <Recommend :dataList='k.data'></Recommend>
                <Card cartTitle="猜你喜欢"></Card>
              </template>
              <!-- 运动户外  .... -->
              <Banner v-if="k.type==='bannerList'"
                      :dataList="k.imgUrl"></Banner>

              <template v-if="k.type==='iconsList'">
                <Icons :dataList="k.data"></Icons>
                <Card cartTitle="热销爆品"></Card>
              </template>

              <template v-if="k.type==='hotList'">
                <Hot :dataList="k.data"></Hot>
                <Card cartTitle="推荐店铺"></Card>
              </template>

              <template v-if="k.type==='shopList'">
                <Shop :dataList="k.data"></Shop>
                <Card cartTitle="为你推荐"></Card>
              </template>

              <CommodityList v-if="k.type === 'commodityList'"
                             :dataList='k.data'></CommodityList>

            </block>
          </block>
          <view v-else>
            暂无数据···
          </view>
          <view class="load-text f-color">
            {{item.loadText}}
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <Tabbar currentPage='index'></Tabbar>
  </view>
</template>

<script>
import $http from '@/common/api/request.js'
import IndexSwiper from '@/components/index/indexSwiper.vue'
import Recommend from '@/pages/index/Recommend.vue'
import Card from '@/components/common/Card.vue'
import CommodityList from '@/components/common/CommodityList.vue'
import Banner from '@/components/index/Banner.vue'
import Icons from '@/components/index/Icons.vue'
import Hot from '@/components/index/Hot.vue'
import Shop from '@/components/index/Shop.vue'
import Tabbar from '@/components/common/Tabbar.vue'

export default {
  data () {
    return {
      // 选中的索引
      topBarIndex: 0,
      scrollIntoIndex: 'top0',
      // 内容块的高度值
      clientHeight: 0,
      // 顶栏数据
      topBar: [],
      // 承载数据的
      newTopBar: []
    }
  },
  components: {
    IndexSwiper,
    Recommend,
    Card,
    CommodityList,
    Banner,
    Icons,
    Hot,
    Shop,
    Tabbar,
  },
  onLoad () {
    this.__init()
  },
  onReady () {
    uni.getSystemInfo({
      success: (res) => {
        this.clientHeight = res.windowHeight - uni.upx2px(80) - this.getClientHeight();
      }
    })
  },
  // 标题栏按钮点击
  onNavigationBarButtonTap (e) {
    if (e.float === 'left') {
      uni.navigateTo({
        url: '../search/search'
      })
    }
  },
  methods: {
    // 请求首页数据
    __init () {
      // console.log($http.a)
      $http.request({
        url: "/index_list/data"
      }).then((res) => {
        this.topBar = res.topBar;
        this.newTopBar = this.initData(res)
      }).catch(() => {
        uni.showToast({
          title: '已无更多数据了···',
          icon: 'none'
        })
      })


    },
    // 添加数据
    initData (res) {
      let arr = [];
      for (let i = 0; i < this.topBar.length; i++) {
        let obj = {
          data: [],
          load: "first",
          loadText: "上拉加载更多 ····"
        }
        // 获取首次的数据
        if (i == 0) {
          obj.data = res.data
        }
        arr.push(obj)
      }
      return arr;
    },
    // 点击顶栏
    changeTab (index) {
      if (this.topBarIndex === index) {
        return;
      }
      this.topBarIndex = index;
      this.scrollIntoIndex = 'top' + index
      // 每一次滑动赋值 为first
      if (this.newTopBar[this.topBarIndex].load === 'first') {
        this.addData()
      }
    },
    // 对应滑动
    onChangTab (e) {
      this.changeTab(e.detail.current)
    },
    // 获取可视区域高度兼容
    getClientHeight () {
      const res = uni.getSystemInfoSync()
      const system = res.platform;
      if (system === 'ios') {
        return 44 + res.statusBarHeight;
      } else if (system === 'android') {
        return -29 + res.statusBarHeight;
      } else {
        return 0;
      }
    },
    // 显示不同数据
    addData (callback) {
      // 拿到索引
      let index = this.topBarIndex;  //索引1
      // 拿到id
      let id = this.topBar[index].id; // id:2
      // 请求不同的数据
      let page = Math.ceil(this.newTopBar[index].data.length / 5) + 1;
      // 请求数据
      $http.request({
        url: '/index_list/' + id + '/data/' + page + ''
      }).then((res) => {
        this.newTopBar[index].data = [...this.newTopBar[index].data, ...res]
      }).catch(() => {
        uni.showToast({
          title: '已无更多数据了 ····',
          icon: 'none'
        })
      })
      // 当请求后重新赋值
      this.newTopBar[index].load = 'last'
      if (typeof callback === 'function') {
        callback()
      }
    },
    // 上拉加载更多
    loadMore (index) {
      this.newTopBar[index].loadText = '加载中···'
      // 请求完数据， 文字提示信息又换成【上拉加载更多···】
      this.addData(() => {
        this.newTopBar[index].loadText = '上拉加载更多···'
      })
    }
  }
}
</script>

<style scoped>
.wx-nav {
  text-align: center;
  height: 120rpx;
  width: 100%;
  line-height: 150rpx;
  font-size: 32rpx;
}
.scroll-content {
  width: 100%;
  height: 80rpx;
  white-space: nowrap;
}
.scroll-item {
  display: inline-block;
  padding: 10rpx 30rpx;
  font-size: 30rpx;
}
.f-active-color {
  padding: 10rpx 0;
  border-bottom: 6rpx solid #ff115c;
}
.load-text {
  border-top: 2rpx solid #c0c0c0;
  line-height: 60rpx;
  text-align: center;
}
</style>
